<template>
  <div>
    <Navigation></Navigation>
    <div class="box1">
      <div class="intro">
        概述<br />
        <span class="intro2">
          此平台以城市公交运营企业、乘客为主要服务对象，建设城市公共交通智能<br />化系统。以加快推进公交行业的运行状态日常监测、
          服务监管、统计分析与<br />异常预警，实现协同调度，并提供及时
          可靠的出行信息服务。旨在建设部署新版公<br />交车辆智能化应用系统，
          实现自动排班、无纸化调度功能，切实有效的提升公交公司的管理和服务水平。
        </span>

        <iframe
          src="//player.bilibili.com/player.html?aid=286456964&bvid=BV1Sf4y1R7Lc&cid=216053193&page=1"
          scrolling="no"
          border="0"
          frameborder="no"
          framespacing="0"
          allowfullscreen="true"
        >
        </iframe>
      </div>
    </div>
    <!-- 第二个盒子 -->
    <div class="box2">
      <img class="intro3" src="../assets/2.jpg" />
      <div class="intro4">
        面向用户<br /><br />
        <span class="intro5">
          <span style="color: #7bc2ed">系统管理员:</span><br />
          系统管理员可通过登录管理员账号对该系统进行管理，包括用户管理、评论管理、<br />
          站点管理、路线管理、车辆管理、员工管理和监控管理。
          <br /><br />
          <span style="color: #7bc2ed">乘客:</span><br />
          乘客可登录账号，在系统内进行留言评论、查询路线和查询站点的操作
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "../components/Navigation.vue";
export default {
  name: "Introduce",
  components: { Navigation },
};
</script>
<style scoped>
.box1 {
  width: 100%;
  height: 40%;
  /* background-color: aqua; */
  display: flex;
  position: absolute;
  top: 10%;
  left: 0;
  flex-wrap: wrap;
}
.intro {
  font-weight: bold;
  font-size: 27px;
  left: 13%;
  position: relative;
  top: 17%;
  color: #7bc2ed;
}
.intro2 {
  font-size: 17px;
  color: #636363;
  position: relative;
  top: 3%;
}
.intro3 {
  position: relative;
  left: 15%;
  width: 30%;
  height: 80%;
  top: 13%;
}
iframe {
  left: 78%;
  top: -55%;
  width: 40%;
  height: 90%;
  /* width: 100%;
    height: 100%; */
  position: relative;
}
.box2 {
  display: flex;
  width: 100%;
  position: absolute;
  top: 54%;
  background-color: #f4f4f4;
  height: 60%;
  bottom: 0;
}
.intro4 {
  font-weight: bold;
  font-size: 27px;
  left: 20%;
  position: relative;
  top: 15%;
  color: #7bc2ed;
}
.intro5 {
  font-size: 17px;
  color: #636363;
  position: relative;
  top: 3%;
}
</style>
>
